<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/banner' }">banner管理</el-breadcrumb-item>
          <el-breadcrumb-item>上传Banner</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="banner图片：" prop="bannerImage">
          <el-upload
            :action="baseUrl"
            list-type="picture-card"
            :file-list="fileList"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :on-change="bannerChange"
            :on-remove="bannerRemove"
            :on-success="handlesuccess"
            :class="{banner:banner}"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="remark">备注：长700px &nbsp; *&nbsp; 高300px</span>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <!-- <el-form-item label="礼品简介" prop="desc">
           <div class="raido">
            <el-radio-group v-model="ruleForm.resource" @change="test">
            </el-radio-group>
       
          </div>
        </el-form-item>-->
        <el-form-item label="链接地址：" prop="bannerType">
          <el-radio-group v-model="ruleForm.bannerType" @change="test">
            <el-radio :label="2">站外链接</el-radio>
            <el-radio :label="1">站内链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="站外链接：" prop="bannerUrl" v-if="open">
          <el-input type="input" v-model="ruleForm.bannerUrl" style="width:220px;"></el-input>
        </el-form-item>
        <el-form-item label="站内链接：" prop="bannerJumpType" v-if="instation">
          <el-select v-model="ruleForm.bannerJumpType" placeholder="请选择跳转页面">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import base from "@/views/api/base";
export default {
  data() {
    return {
      fileList: [], //回显图片
      // 上传地址
      baseUrl: "",
      banner: false,
      dialogImageUrl: "",
      dialogVisible: false,
      radio: 1,
      open: true, //站外链接
      instation: false, //站内链接
      ruleForm: {
        bannerImage: "",
        bannerType: 2,
        bannerUrl: "",
        bannerJumpType: ""
      },
      rules: {
        bannerImage: [
          { required: true, message: "请上传banner图片", trigger: "blur" }
        ],
        bannerType: [
          { required: true, message: "请选择站外站内状态", trigger: "blur" }
        ],
        bannerUrl: [
          { required: true, message: "请输入站外链接", trigger: "blur" }
        ],
        bannerJumpType: [
          { required: true, message: "请选择站内链接", trigger: "blur" }
        ]
      },
      // 下拉选择
      options: [
        {
          value: 1,
          label: "主页"
        },
        {
          value: 2,
          label: "充值页面"
        },
        {
          value: 3,
          label: "口粮抽奖"
        },
        {
          value: 4,
          label: "成为帮手"
        }
      ],
      value: ""
    };
  },
  // 获取详情bannerId
  created() {
    console.log(this.$route.query.bannerId, "this.$route.query.bannerId");
    if (this.$route.query.bannerId) {
      setTimeout(() => {
        this.$http.article
          .Getbanner({ pet_bannerId: this.$route.query.bannerId })
          .then(res => {
            console.log("获取banner详情", res);
            this.ruleForm = res.result;
            this.fileList.push({ url: res.result.bannerImage });
            this.banner = this.fileList.length == 1 ? true : false;
            if (res.result.bannerType == 1) {
              this.open = false;
              this.instation = true;
            } else {
              this.open = true;
              this.instation = false;
            }
          });
      });
    } else {
      return;
    }
  },
  mounted() {
    this.baseUrl = base.sq + "/yuanjiu/upload/uploadImg";
    console.log("base", this.baseUrl);
  },
  methods: {
    // 图片上传事件
    bannerChange(file, fileList) {
      this.banner = fileList.length >= 1;
    },
    // 图片移出事件
    bannerRemove(file, fileList) {
      this.banner = fileList.length >= 1;
    },
    // 图片上传成功
    handlesuccess(response) {
      this.ruleForm.bannerImage = response.result;
      console.log("response", response.result);
    },
    // // 上传图片
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 测试
    test(val) {
      if (val == 2) {
        this.open = true;
        this.instation = false;
        this.ruleForm.bannerJumpType = "";
      } else {
        this.open = false;
        this.instation = true;
        this.ruleForm.bannerUrl = "";
      }
      console.log("选中标签", val);
    },
    // 提交的标签
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http.article.addBanner(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.$router.push("/home/banner");
            } else {
              this.$message.warning(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置的按钮
    resetForm(formName) {
      this.banner=false;
      this.fileList = [];
      this.$refs[formName].resetFields();
    }
  }
};
</script>


<style lang="scss" scoped>
.box-card {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
}
.radio {
  display: flex;
  align-items: center;
}
// 店铺照片
.banner ::v-deep .el-upload--picture-card {
  display: none;
}
.remark {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #F56C6C;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
</style>